<template>
  <div class="item01 flex" v-if="workInfo" :style="{height,lineHeight}">
    <div class="flex-item checkBtn" v-if="editStatus>0" :style="{lineHeight:height}">
      <CheckBtn :check_id="workInfo.works_id" @changeCheckState="changeCheckState" ref="checkBtn" :state="CheckBtnState" :theme="CheckBtnTheme" style="margin-top: .6rem"></CheckBtn>
    </div>
    <div class="flex flex-item" style="flex: 9;border: 1px solid #C4C4C4">
      <div class="flex-item imgArea">
        <ImageBlock :imgSrc="domain+'/Uploads'+workInfo.s_path" :width="height" :height="height"></ImageBlock>
      </div>
      <div class="flex-item details">
        <slot name="details"></slot>
      </div>
    </div>
  </div>
</template>
<style scoped>
.item01{}
.checkBtn{flex: 1;}
.imgArea{flex: 2;}
.details{flex: 5;text-align: left;}
</style>
<script>
import ImageBlock from "../images/ImageBlock";
import CheckBtn from "../buttons/CheckBtn";
export default {
  props:{
    workInfo:{
      type:[Array,Object],
      default: []
    },
    editStatus:{
      type:Number,
      default:0
    },
    height:{
      default:'2rem'
    },
    lineHeight:{
      default:"1rem"
    },
    CheckBtnState:{
      default:0
    },
    CheckBtnTheme:{
      default:"SkyBlue"
    },
  },
  watch:{
    editStatus(n){this.dEditStatus=n},
    CheckBtnState(n){this.dCheckBtnState=n},
    CheckBtnTheme(n){this.dCheckBtnTheme=n},
  },
  methods:{
    changeCheckState(params){
      this.$emit('changeCheckState',params)
    },
    setDEditStatus(v){this.dEditStatus=v},
  },
  data(){
    return {
      dEditStatus:0,
      dCheckBtnState:"",
      dCheckBtnTheme:""
    }
  },
  components: {CheckBtn, ImageBlock}
}
</script>
